<ion-card class="card-file ion-activatable">

    @if (file) {
        <ion-item [class.file-selected]="showCheckbox && selected" class="ion-text-wrap item-file" [detail]="false">

            @if (showCheckbox) {
                <ion-checkbox labelPlacement="start" [(ngModel)]="selected" (ngModelChange)="onSelectedFileChange.emit($event)" />
            } @else {
                <ion-thumbnail slot="start" (click)="download($event, true)">
                    <img [src]="fileIcon" alt="" role="presentation" />
                </ion-thumbnail>
            }

            <ion-label (click)="download($event, true)">
                <p class="item-heading">
                    <span (ariaButtonClick)="download($event, true)">{{fileName}}</span>

                    @if (state === statusDownloaded) {
                        <ion-icon class="core-icon-downloaded" color="success" name="fam-cloud-done"
                            [attr.aria-label]="'core.downloaded' | translate" role="status" />
                    }
                </p>


                @if (fileSizeReadable || showTime) {
                    <p>
                        @if (fileSizeReadable) {
                            {{ fileSizeReadable }}
                        }
                        @if (fileSizeReadable && showTime) {
                            ·
                        }
                        @if (showTime) {
                            {{ timemodified * 1000 | coreFormatDate }}
                        }
                    </p>
                }
            </ion-label>
            <div slot="end" class="flex-row">
                @if (isDownloaded && isIOS) {
                    <ion-button fill="clear" (click)="openFile($event, true)" [title]="openButtonLabel | translate">
                        <ion-icon slot="icon-only" [name]="openButtonIcon" aria-hidden="true" />
                    </ion-button>
                }

                @if (!showCheckbox) {

                    @if (state !== statusDownloaded) {
                        <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
                            [canTrustDownload]="!alwaysDownload" (action)="download()" />
                    }

                    @if (canDelete) {
                        <ion-button (click)="openMenuClick()" fill="clear">
                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    }
                }
            </div>
        </ion-item>
        <ion-ripple-effect />
    }

</ion-card>
